// 更换课程弹框
<template>
  <el-row>
    <el-dialog title="课程选择" :visible.sync="isShowSelectCourse">
      <el-table :data="classList">
        <!-- <el-table-column property="classId" label="班级id" width="150"></el-table-column> -->
        <el-table-column property="className" label="班级名称" width="200"></el-table-column>
        <!-- <el-table-column property="classResourceLessonName" label="班级课程名称"></el-table-column> -->
        <!-- <el-table-column property="resourceLessonId" label="课程id"></el-table-column> -->
        <el-table-column property="resourceLessonName" label="课程名称"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="changeCourse(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-row>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getClassResource } from '@/api/overall'
import { setClassId, setResourceLessonId } from '@/utils/auth'

export default {
  data () {
    return {
      classList: [],
      isShowSelectCourse: false
    }
  },
  props: {},
  components: {},
  mounted () {},
  computed: {
    ...mapGetters([
      'loginInfo'
    ])
  },
  watch: {},
  methods: {
    ...mapActions('user', ['setLoginInfo']),
    changeShow (bol) {
      this.isShowSelectCourse = bol
      if (bol) {
        this.getClassResource()
      }
    },
    async getClassResource () {
      const res = await getClassResource()
      if (res.code === '200') {
        this.classList = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    changeCourse (data) {
      setClassId(data.classId)
      setResourceLessonId(data.resourceLessonId)
      const info = Object.assign(this.loginInfo, {
        resourceLessonName: data.resourceLessonName,
        resourceLessonId: data.resourceLessonId,
        classId: data.classId
      })
      this.setLoginInfo(info)
      this.isShowSelectCourse = false
      this.$emit('changeCourse', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.select-cource-class {
  padding-bottom: 20px;
  border-bottom:1px solid rgba(229,229,229,1);
  div {
     color:rgba(16,29,55,1);
  font-size: 16px;
  }
  .right-content {
    .select-class {
      margin-right: 30px;
    }
  }
}
</style>
